// 配置路由相关的信息

// 导入路由包
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

const Home = () => import('../components/Home.vue')
const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')
const Profile = () => import('../components/Profile.vue')


// 1.通过Vue.use(插件),安装插件 (就会执行他的install的方法)
Vue.use(VueRouter)

// 配置路由和组件之间的映射关系(routes属性)
const routes = [
  // 一个映射关系就是一个对象
  {
    path: '/',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    // 元数据(描述数据的数据)
    meta: {
      title: '首页'
    },
    children: [
      // {
      //   path: '/',
      //   redirect: 'news'
      // },

      {
        // 子路由不需要加/
        path: 'news',
        component: HomeNews
      },
      {
        // 子路由不需要加/
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    // beforeEnter: ((to, from, next) => {
    //   console.log('about------------enter');
    //   next()
    // })
  },
  {
    path: '/user/:userId',
    component: User,
    meta: {
      title: '用户'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    }
  }
]

// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的映射关系(routes属性) 
  routes,
  // history模式
  mode: 'history',
  // linkActiveClass: 'ooo'
})


// 前置钩子(回调)
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // console.log(to);
  // 防止嵌套路由取不到
  document.title = to.matched[0].meta.title || to.meta.title
  next()
})

// 后置钩子,不需要主动调用next()函数
router.afterEach((to, from) => {

})

// 3.将router对象传入到Vue实例
export default router